<script setup>
import { message } from 'ant-design-vue';
import { defineComponent, onMounted, reactive, ref, toRaw } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import dayjs from 'dayjs';
import {
	getProgrames,
	addEarthwork,
	updateEarthwork
} from '@/service/services.js';
import { useAccountStore } from '@/stores/account.js';
import { multiply } from 'mathjs';
const account = useAccountStore();
const formRef = ref();
const data = ref([]);
const programes = ref([]);
const labelCol = {
	span: 5
};
const wrapperCol = {
	span: 13
};
const dateFormat = 'YYYY-MM-DD';
const state = reactive({
	formState: {
		programName: '',
		date: dayjs(),
		content: '',
		machineModel: '',
		unit: '',
		useCount: '',
		quantities: '',
		useCompany: '',
		dieselPrice: '',
		head: '',
		remark: '',
		checkFlag: ''
	}
});
const rules = {
	name: [
		{
			required: true,
			message: 'Please input Activity name',
			trigger: 'change'
		},
		{
			min: 3,
			max: 5,
			message: 'Length should be 3 to 5',
			trigger: 'blur'
		}
	],
	region: [
		{
			required: true,
			message: 'Please select Activity zone',
			trigger: 'change'
		}
	],
	date1: [
		{
			required: true,
			message: 'Please pick a date',
			trigger: 'change',
			type: 'object'
		}
	],
	type: [
		{
			type: 'array',
			required: true,
			message: 'Please select at least one activity type',
			trigger: 'change'
		}
	],
	resource: [
		{
			required: true,
			message: 'Please select activity resource',
			trigger: 'change'
		}
	],
	desc: [
		{
			required: true,
			message: 'Please input activity form',
			trigger: 'blur'
		}
	]
};
const router = useRouter();
const route = useRoute();
let index = 0;
const items = ref(['加油', '装车', '机械', '外运', '内倒', '回填']);
const value = ref();
const inputRef = ref();
const name = ref();
const VNodes = defineComponent({
	props: {
		vnodes: {
			type: Object,
			required: true
		}
	},
	render() {
		return this.vnodes;
	}
});
const addItem = (e) => {
	e.preventDefault();
	console.log('addItem');
	items.value.push(name.value || `New item ${(index += 1)}`);
	name.value = '';
	setTimeout(() => {
		inputRef.value?.focus();
	}, 0);
};
const onSubmit = () => {
	formRef.value
		.validate()
		.then(() => {
			console.log('values', state.formState, toRaw(state.formState));
			if (route['query']?.id) {
				account.spinning = true;

				updateEarthwork({
					id: route['query']?.id,
					...state.formState,
					date: dayjs(state.formState.date).format('YYYY-MM-DD')
				})
					.then((res) => {
						account.spinning = false;

						formRef.value.resetFields();
						router.back();
					})
					.catch((err) => {
						account.spinning = false;
						message.error(err);
					});
			} else {
				account.spinning = true;
				addEarthwork({
					...state.formState,
					date: dayjs(state.formState.date).format('YYYY-MM-DD')
				})
					.then((res) => {
						account.spinning = false;
						formRef.value.resetFields();
						router.back();
					})
					.catch((err) => {
						account.spinning = false;
						message.error(err);
					});
			}
		})
		.catch((error) => {
			account.spinning = false;
			console.log('error', error);
		});
};
const resetForm = () => {
	formRef.value.resetFields();
	router.back();
};
onMounted(() => {
	account.spinning = true;
	getProgrames({})
		.then((resp) => {
			account.spinning = false;
			programes.value = resp;
		})
		.catch((err) => {
			account.spinning = false;
			message.err(err);
		});
	if (route['query']?.id) {
		console.log(route['query']);
		state.formState = {
			...route['query'],
			date: dayjs(route['query'].date, 'YYYY-MM-DD')
		};
	}
});
const handleUseCount = (i) => {
	if ('双桥' === state.formState.machineModel) {
		state.formState.quantities = multiply(state.formState.useCount, 16);
	} else if ('后八' === state.formState.machineModel) {
		state.formState.quantities = multiply(state.formState.useCount, 22.4);
	}
};
const handleMachineModel = (i) => {
	if ('双桥' === i) {
		state.formState.quantities = multiply(state.formState.useCount, 16);
	} else if ('后八' === i) {
		state.formState.quantities = multiply(state.formState.useCount, 22.4);
	}
};
</script>

<template>
	<section class="contain-edit-inbound">
		<section class="edit">编辑土方</section>
		<a-form
			ref="formRef"
			:model="state.formState"
			:rules="rules"
			:label-col="labelCol"
			:wrapper-col="wrapperCol"
		>
			<a-form-item ref="programName" label="项目名称" name="programName">
				<a-select v-model:value="state.formState.programName">
					<a-select-option :key="i" v-for="i in account.programes" :value="i">{{
						i
					}}</a-select-option>
				</a-select>
			</a-form-item>
			<a-form-item label="日期" name="date">
				<a-date-picker
					v-model:value="state.formState.date"
					:format="dateFormat"
					style="width: 100%"
				/>
			</a-form-item>
			<a-form-item label="内容" name="content">
				<!-- <a-select v-model:value="state.formState.content">
					<a-select-option value="加油" key="加油">加油</a-select-option>
					<a-select-option value="装车" key="装车">装车</a-select-option>
					<a-select-option value="机械" key="机械">机械</a-select-option>
					<a-select-option value="外运" key="外运">外运</a-select-option>
					<a-select-option value="内倒" key="内倒">内倒</a-select-option>
					<a-select-option value="回填" key="回填">回填</a-select-option>
				</a-select> -->
				<a-select
					v-model:value="state.formState.content"
					:options="items.map((item) => ({ value: item }))"
				>
					<template #dropdownRender="{ menuNode: menu }">
						<v-nodes :vnodes="menu" />
						<a-divider style="margin: 4px 0" />
						<a-space style="padding: 4px 8px">
							<a-input
								ref="inputRef"
								v-model:value="name"
							/>
							<a-button type="text" @click="addItem"> 添加 </a-button>
						</a-space>
					</template>
				</a-select>
			</a-form-item>
			<a-form-item label="机械型号" name="machineModel">
				<a-select
					v-model:value="state.formState.machineModel"
					@change="handleMachineModel"
				>
					<a-select-option value="260挖机" key="260挖机"
						>260挖机</a-select-option
					>
					<a-select-option value="1号350挖机" key="1号350挖机"
						>1号350挖机</a-select-option
					>
					<a-select-option value="2号350挖机" key="2号350挖机"
						>2号350挖机</a-select-option
					>
					<a-select-option value="双桥" key="双桥">双桥</a-select-option>
					<a-select-option value="后八" key="后八">后八</a-select-option>
					<a-select-option value="其他" key="其他">其他</a-select-option>
				</a-select>
			</a-form-item>
			<a-form-item label="单位" name="unit">
				<a-select v-model:value="state.formState.unit">
					<a-select-option value="车" key="车">车</a-select-option>
					<a-select-option value="升" key="升">升</a-select-option>
					<a-select-option value="小时" key="小时">小时</a-select-option>
				</a-select>
			</a-form-item>
			<a-form-item label="使用数量" name="useCount">
				<a-input
					v-model:value="state.formState.useCount"
					@change="handleUseCount"
				/>
			</a-form-item>
			<a-form-item label="工程量" name="quantities">
				<a-input v-model:value="state.formState.quantities" />
			</a-form-item>
			<a-form-item label="使用单位" name="useCompany">
				<a-select v-model:value="state.formState.useCompany">
					<a-select-option value="甲方" key="甲方">甲方</a-select-option>
					<a-select-option value="下游" key="下游">下游</a-select-option>
					<a-select-option value="桩基" key="桩基">桩基</a-select-option>
					<a-select-option value="总包" key="总包">总包</a-select-option>
					<a-select-option value="其他" key="其他">其他</a-select-option>
				</a-select>
			</a-form-item>
			<a-form-item label="柴油实时单价" name="dieselPrice">
				<a-input v-model:value="state.formState.dieselPrice" />
			</a-form-item>
			<a-form-item label="负责人" name="head">
				<a-input v-model:value="state.formState.head" />
			</a-form-item>
			<a-form-item label="备注" name="remark">
				<a-input v-model:value="state.formState.remark" />
			</a-form-item>
			<a-form-item label="核对情况" name="checkFlag">
				<a-select v-model:value="state.formState.checkFlag">
					<a-select-option value="已核对" key="已核对">已核对</a-select-option>
					<a-select-option value="未核对" key="未核对">未核对</a-select-option>
				</a-select>
			</a-form-item>
			<a-form-item :wrapper-col="{ span: 14, offset: 5 }">
				<a-button type="primary" @click="onSubmit">确认</a-button>
				<a-button style="margin-left: 10px" @click="resetForm">取消</a-button>
			</a-form-item>
		</a-form>
	</section>
</template>

<style scoped>
.contain-edit-inbound {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	overflow: auto;
}
.edit {
	box-sizing: border-box;
	margin: 16px 0;
	text-align: center;
	font-size: 16px;
	list-style: none;
}
</style>
